<template>
  <div class="footer">
    <el-container>
      <el-row class="about" :span="24">

        <el-col :span="4" v-for="footer in footer_list" :key="footer.pk"><a :href="footer.link">{{footer.name}}</a></el-col>
<!--        <el-col :span="4"><router-link to="">联系我们</router-link></el-col>-->
<!--        <el-col :span="4"><router-link to="">商务合作</router-link></el-col>-->
<!--        <el-col :span="4"><router-link to="">帮助中心</router-link></el-col>-->
<!--        <el-col :span="4"><router-link to="">意见反馈</router-link></el-col>-->
<!--        <el-col :span="4"><router-link to="">新手指南</router-link></el-col>-->
         <el-col class="copyright" :span="24"><span>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</span></el-col>
      </el-row>
    </el-container>
  </div>
</template>

<script>
  export default{
    name: "Footer",
    data(){
      return{
        footer_list: []
      }
    },
    created(){
      this.$axios.get(this.$settings.Host+ '/footer/').then(response=>{
        console.log(response.data);
        this.footer_list = response.data;
      }).catch(error=>{
        console.log(error.response);
      })
    },
  }
</script>

<style scoped>
.footer{
  width: 100%;
  height: 128px;
  background: #25292e;
}
.footer .el-container{
  width: 1200px;
  margin: auto;
  height: 52px;
}
.footer .el-container .about {
  align-items: center;
  padding: 0 200px;
  width: 1200px;
  margin-top: 38px;
}
.footer .el-row a{
  color: #fff;
  font-size: 14px;
}
.footer .el-container .copyright{
  text-align: center;
  color: #fff;
  font-size: 14px;
  height: 17px;
}
  .el-container .el-row a:hover{
    color: gray;
    font-size: 16px;
  }
</style>
